<template>
  <div class="album main" :class="{darkAlbum:darkTheme}">
    <div class="album-inner">
      <div class="upload-btn" v-if="flag">
       <input type="file" name="image" id="upImg" @change="giveInfo">
       <el-button type="primary" size="mini" @click="imgAdd" class="upBtn">上传<i class="el-icon-upload el-icon--right"></i></el-button>
       <el-button class="maskBtn" type="success" size="mini">点击选择图片<i class="el-icon-picture"></i></el-button>
      </div>
      <div class="empty-album" v-cloak v-show="!imgList.length">相册为空，请联系管理员添加图片哦</div>
      <div class="block">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item,index) in imgListWithTime" :key="index" >
            <el-card shadow="hover">
              <el-image :src="item.imgurl|parseUrl" :fit="'cover'" class="image" style="width: 200px; height: 200px" lazy :preview-src-list="imgList"></el-image>
              <div>
                <div class="imgbottom clearfix">
                  <div><time>{{ item.time }}</time></div><el-button v-if="flag" size="mini" icon="el-icon-delete" circle class="delBtn" @click="imgDel(item.imgurl)"></el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
     </div>
    </div>

  </div>
</template>

<script>

import uri from '@/config/uri';
import {mapState} from 'vuex'
export default {
  data(){
    return{
      imgList:[],
      imgListWithTime:[],
      currentDate: new Date(), //时间戳
    }
  },
  computed:{
    ...mapState("manage",["flag"]),
    ...mapState("common",["darkTheme"])
  },
  methods:{
    fetchAllImage(){
      this.$http.get(uri.getImg).then((res)=>{
        this.imgList=[]
        this.imgListWithTime = res.data
        this.imgListWithTime.forEach(element => {
          // console.log(element)
          let host = 'http://localhost:3003/static'
          this.imgList.push(host + element.imgurl)
        });
      }).catch((res)=>{
        console.log(res)
      })
    },
    dealImageDel(url){
      this.$http.post(uri.delImg,{imgurl:url})
      .then((res)=>{
        // console.log(res)
        this.$message({
              type: 'success',
              message: '删除成功'
            })
        this.fetchAllImage()
      }).catch((err)=>{
          this.$message({
              type: 'warning',
              message: err
            })
      })
    },
    giveInfo(){
      var file = document.getElementById('upImg').files[0]
      if(file){
        let str = '已选择文件: '+file.name
        this.$message({
            type: 'success',
            message: str
        })
      }else{
        this.$message({
            type: 'warning',
            message: '未选择任何文件'
        })
      }
    },
    imgAdd() {
        var file = document.getElementById('upImg').files[0]
        if(!file){
          this.$message({
            type: 'warning',
            message: '没有选择任何文件'
          })
          return
        }
        // 第一步.将图片上传到服务器.
        var formdata = new FormData();
        formdata.append('image', file);
        // 这里formdata.append的'image',就是后端接收的field字段，一定要和后端保持一致，否则会出错
        // console.log($file)
        this.$http({
          url: uri.uploadImg,
          method: 'post',
          data: formdata,
          headers: {'Content-Type':'multipart/form-data'}
        }).then((res) => {
            // console.log(res)
          this.$nextTick(()=>{
            if(!res.err){
              this.$message({
                type: 'success',
                message: '上传成功'
              })
              this.fetchAllImage()
            }else{
                this.$message({
                type: 'info',
                message: res.msg
              })
            }
          })
        }).catch((err)=>{
          this.$message({
              type: 'warning',
              message: '上传失败'
          })
        })
    },
    imgDel(url){
      this.$confirm('确认删除图片?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //点击了确认
          this.dealImageDel(url)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  created(){
    this.fetchAllImage()
  },
  filters:{
    parseUrl(urlTail){
      let host = 'http://localhost:3003/static'
      return host+urlTail
    }
  }
}
</script>

<style lang="scss" scoped>
.album{
  position: relative;
  margin-top: 80px;
  &-inner{
    box-sizing: border-box;
    padding: 0 30px;
    height: 600px;
    overflow-y: auto;
    .el-col{
       margin-bottom: 20px;
    }
  }
}
.el-card{
  padding: 10px;
  background-color:aliceblue
}
.empty-album{
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  color: #c6d2ea;
  font-size: 30px;
}
.upload-btn{
  display: flex;
  justify-content: flex-start;
  line-height: 40px;
  height: 40px;
  margin-bottom: 20px;
  position: relative;
}
.imgbottom{
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  text-indent: 2em;
  margin-top: 5px;
}
.delBtn{
  margin-right: -70px;
}
#upImg{
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 116px;
  height: 28px;
  left: 10px;
  cursor: pointer;
}
.upBtn{
  position: absolute;
  left: 150px;
}
.maskBtn{
  position: absolute;
  cursor: pointer;
  left: 0;
  z-index: 1;
}
// 暗黑主题
.darkAlbum{
  .maskBtn,.upBtn{
      background-color: #263c4f;
  }
  .el-card{
    border: 1px solid #2196f3;
    background-color:#263c4f;
    box-shadow: 0 0 10px rgb(61 122 132 / 50%);
    color: white;
    // padding: 10px;
    .delBtn{
        background-color: #263c4f;
        color: aqua;
        border: 1px solid #2196f3;
        border-radius: 2px;
        &:hover{
          color:red;
        }
    }
    
  }
}

</style>